<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>名字是:{{person.name}}</h1>
    <h2>年龄是:{{person.age}}</h2>
    <h3>工作是:{{person.job.type}}</h3>
    <h3>月薪是:{{person.job.salary}}</h3>
    <h4>爱好:{{person.hobby}}</h4>
    <button @click="changePerson">修改个人信息</button>
    <HelloWorld msg="爱神的箭佛件大事"></HelloWorld>
</template>

<script>
    import {ref,reactive} from 'vue'
    import HelloWorld from "./components/HelloWorld";
    export default {

        name: 'App',
        components: {HelloWorld},
        setup() {
            let person = reactive({
                name:'徐',
                age:18,
                job:{
                    type:'coder',
                    salary:"30k",
                },
                hobby:['抽烟','烫头','买化妆品']
            })

            function changePerson() {
                person.name = '夏'
                person.age = 19
                person.job.type = '搬砖者'
                person.job.salary = '2.8k'
                person.hobby[0] = '学习'
                console.log(person)
            }
            return {
                person,
                changePerson,
            }
        },

    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
